<!-- pages/index/index.vue -->
<script setup>
	import { computed, ref } from 'vue'
	import feedList from './components/feed-list.vue'
	import doctorList from './components/doctor-list.vue'
	import { feedListApi, doctorListApi } from '@/services/doctor.js'
	// 获取安全区域数据
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const tabIndex = ref(0)
	const feedTabs = ref([
		{
			label: '推荐',
			type: 'recommend',
			current: 1,
			hasMore: true,
			list: [],
			rendered: true,
		},
		{
			label: '关注',
			type: 'like',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
		{
			label: '减脂',
			type: 'fatReduction',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
		{
			label: '饮食',
			type: 'food',
			current: 1,
			hasMore: true,
			list: [],
			rendered: false,
		},
	])
	const onFeedTabChange = ({ index }) => {
		tabIndex.value = index
		if (!feedTabs.value[index].rendered) getFeedList()
	}
	const feedType = computed(() => feedTabs.value[tabIndex.value].type)
	const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current)
	const feedPageSize = ref(5)
	const getFeedList = async () => {
		const { code, data, message } = await feedListApi({
			type: feedType.value,
			current: feedCurrent.value,
			pageSize: feedPageSize.value,
		})
		if (code !== 10000) return uni.utils.toast(message)
		data.rows.forEach((item) => {
			item.content = item.content.replace(/<[^>]+>/g, '')
		})
		feedTabs.value[tabIndex.value].rendered = true
		feedTabs.value[tabIndex.value].list.push(...data.rows)
		feedTabs.value[tabIndex.value].current++
		feedTabs.value[tabIndex.value].hasMore = feedCurrent.value <= data.pageTotal
	}
	getFeedList()
	const onScrolltolower = () => {
		if (feedTabs.value[tabIndex.value].hasMore) getFeedList()
	}
	const doctorItems = ref([])
	const getDoctorList = async () => {
		const { code, data, message } = await doctorListApi()
		if (code !== 10000) return uni.utils.toast(message)
		doctorItems.value = data.rows
	}
	getDoctorList()
</script>
<template>
	<scroll-page @scrolltolower="onScrolltolower">
		<view
			class="index-page"
			:style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
		>
			<!-- 页面导航 -->
			<view
				:style="{ paddingTop: safeAreaInsets.top + 'px' }"
				class="page-navbar"
				>优医</view
			>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input
					placeholder-class="input-placeholder"
					placeholder="搜一搜: 疾病/症状/医生/健康知识"
					class="input"
					type="text"
				/>
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>
			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-1.png"
					/>
					<text class="label">问医生</text>
					<text class="small">按科室查问医生</text>
				</navigator>
				<navigator
					hover-class="none"
					class="quick-entry-item"
					url="/subpkg_consult/quickly/index?type=2"
				>
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-2.png"
					/>
					<text class="label">极速问诊</text>
					<text class="small">20s医生极速回复</text>
				</navigator>
				<navigator hover-class="none" class="quick-entry-item">
					<image
						class="quick-entry-icon"
						src="/static/images/quick-entry-3.png"
					/>
					<text class="label">开药门诊</text>
					<text class="small">线上买药更方便</text>
				</navigator>
			</view>
			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_medicine/order_list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-1.png"
					/>
					<text class="label">药品订单</text>
				</navigator>
				<navigator
					hover-class="none"
					class="quick-view-item"
					url="/subpkg_archive/list/index"
				>
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-2.png"
					/>
					<text class="label">健康档案</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-3.png"
					/>
					<text class="label">我的处方</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image
						class="quick-view-icon"
						src="/static/images/quick-view-4.png"
					/>
					<text class="label">疾病查询</text>
				</navigator>
			</view>
			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper
					class="uni-swiper"
					indicator-dots
					indicator-color="#ffffff99"
					indicator-active-color="#fff"
					circular
				>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/banner-1.png" />
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image
								class="banner-image"
								src="/static/images/banner-1.png"
								mode="aspectFill"
							/>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 标签页列表 -->
			<view
				class="doctor-feeds"
				:style="{ marginTop: -safeAreaInsets.top + 'px' }"
			>
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs @click="onFeedTabChange" :list="feedTabs" />
				</custom-sticky>
				<view
					v-for="(feed, index) in feedTabs"
					:key="feed.type"
					v-show="tabIndex === index"
				>
					<doctor-list
						v-show="feed.type === 'recommend'"
						:list="doctorItems"
					></doctor-list>
					<feed-list v-if="feed.rendered" :list="feed.list"></feed-list>
				</view>
			</view>
		</view>
	</scroll-page>
</template>
<style lang="scss">
	@import './index.scss';
</style>
